<template>
	<view class="u-page">
		<view class="u-demo-block">
				
			<br><br><br>
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
					labelPosition="left"
					:model="model1"
					ref="form1"
				>
					<u-form-item
						label="姓 名:"
						prop="userInfo.remark"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.remark"
							border="none"
							placeholder="姓名,只能为中文"
						></u--input>
					</u-form-item>
					<u-form-item
						label="手机号码:"
						prop="userInfo.username"
						borderBottom
						labelWidth="80"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.username"
							
							disabledColor="#ffffff"
							placeholder="请输入手机号码"
							border="none"
						></u--input>
						<!-- <u-icon
							slot="right"
							name="arrow-right"
						></u-icon> -->
					</u-form-item>
					<u-form-item
						label="设置密码:"
						prop="userInfo.password"
						borderBottom
						labelWidth="80"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.password"
							
							disabledColor="#ffffff"
							placeholder="请设置密码"
							border="none"
						></u--input>
						<!-- <u-icon
							slot="right"
							name="arrow-right"
						></u-icon> -->
					</u-form-item>
					<u-form-item
						label="重复密码:"
						prop="userInfo.newpassword"
						borderBottom
						labelWidth="80"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.newpassword"
							
							disabledColor="#ffffff"
							placeholder="请重复输入密码"
							border="none"
						></u--input>
						<!-- <u-icon
							slot="right"
							name="arrow-right"
						></u-icon> -->
					</u-form-item>
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
				<u-button
					type="error"
					text="重置"
					customStyle="margin-top: 10px"
					@click="reset"
				></u-button>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {register} from '@/config/api.js';
	export default {
		data() {
			return {
				
				model1: {
					userInfo: {
						remark: '',
						username: '',
						password: '',
						newpassword: ''
					}
				},
				
				rules: {
					'userInfo.remark': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					'userInfo.password':[{
								required: true,
								min: 6,
								message: '密码要6个以上',
								trigger: 'change'
							}],
					'userInfo.newpassword':[{
									required: true,
									message: "确认密码不能为空",
									trigger: "blur"
								},
								{
									trigger: 'blur',
									validator: (rule, value, callback) => {
										if (value !== this.model1.userInfo.password) {
											callback(new Error('两次输入密码不一致'))
										} else {
											callback()
										}
									}
								}
							],
					'userInfo.username': [{
								required: true,
								message: '请输入电话号码',
								trigger: ['change', 'blur'],
							},
							{
								// 自定义验证函数，见上说明
								validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// this.$u.test.mobile()就是返回true或者false的
									return this.$u.test.mobile(value);
								},
								message: '手机号码不正确',
								// 触发器可以同时用blur和change
								trigger: ['change', 'blur'],
							}
						]
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					
					uni.$u.toast('校验通过')
					const params={
						remark:this.model1.userInfo.remark,
						username:this.model1.userInfo.username,
						password:this.model1.userInfo.password,
					}
					 var encrypt = this.aes_encrypt(JSON.stringify(params))
					this.sub_register(encrypt)
					 
					// console.log(params)
					// console.log(encrypt)
				}).catch(errors => {
					uni.$u.toast('输入有误，校验不过')
				})
			},
			async sub_register(encrypt) {
				console.log(encrypt)
				const params={
					data:encrypt
				}
				 const res= await register(params)
				 if(res.code==200){
					 uni.showToast({
						 title: '注册成功',
						 type: 'success',
						 icon: true,
						 position: 'center',
						 duration: 3500
					 });
					setTimeout(function () {
					    uni.navigateTo({
					    	url: '/pages/auth/login'
					    });
					 }, 3500);
					
				 }
				 },
			reset() {
				const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
				'hotel', 'code', 'userInfo.birthday']
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(()=>{
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				},10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">

</style>
